<template>
  <div class="all-goods">
    <div class="banxin">
      <div>首页/全部商品</div>
      <Banner :src="Src2"></Banner>
      <div class="jifen flex">
        <div class="left">积分：</div>
        <ul class="flex">
          <li v-for="item in priceGroup" :key="item.id">
            <span
              @click="getPriceData(item)"
              :class="{ active: priceId === item.id }"
              >{{ item.text }}</span
            >
          </li>
        </ul>
      </div>
      <div class="cate flex">
        <div class="left">分类：</div>
        <ul class="flex">
          <li v-for="item in cateGroup" :key="item.id">
            <span
              @click="getCateData(item)"
              :class="{ active: cateId === item.id }"
              >{{ item.text }}</span
            >
          </li>
        </ul>
      </div>
      <JPliebiao :arr="list"></JPliebiao>
    </div>
  </div>
</template>

<script>
import Banner from "../components/Shoyei/Banner.vue";
import Src2 from "../assets/images/home/ad.png";
import { getMoreApi } from "../components/http/api";
import JPliebiao from "../components/Shoyei/JPliebiao.vue";

export default {
  components: { Banner, JPliebiao },
  data() {
    return {
      //商品数据
      list: [],
      Src2,
      priceId: 1,
      cateId: 10,
      priceGroup: [
        { id: 1, text: "全部", min: 0, max: 0 },
        { id: 2, text: "我能兑换的", min: 0, max: 0 },
        { id: 3, text: "0-500分", min: 0, max: 500 },
        { id: 4, text: "500-1000分", min: 500, max: 1000 },
        { id: 5, text: "1000-1500分", min: 1000, max: 1500 },
        { id: 6, text: "1500-2500分", min: 1500, max: 2500 },
      ],
      cateGroup: [
        { id: 10, text: "全部", type: 0 },
        { id: 11, text: "实体商品", type: 1 },
        { id: 12, text: "虚拟商品", type: 2 },
      ],
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    getCateData(item) {
      this.cateId = item.id;
      // 修改当前是哪个分类
      this.currentCate = item.type;
      this.getGoods();
    },
    getPriceData(item) {
      this.priceId = item.id;
      this.currentMin = item.min;
      this.currentMax = item.max;
      this.getGoods();
    },
    async getGoods() {
      const params = {
        type: this.currentCate,
        min: this.currentMin,
        max: this.currentMax,
      };
      console.log(params);
      const { data } = await getMoreApi(params);
      this.list = data.map((e) => {
        e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
        return e;
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.all-goods {
  .banxin {
    .flex {
      padding: 10px 0;
    }
    .left {
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #333333;
      line-height: 36px;
    }
    li {
      color: #666;
      padding: 0 10px;
      span {
        cursor: pointer;
        &.active {
          color: #00329b;
        }
      }
    }
  }
}
</style>